<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
    <el-row align="middle" :gutter="24" class="ivu-mt mt20">
      <el-col :span="12">
        <el-form-item label="初始用工人数：" prop="population">
          <span>{{population_origin}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="初始单价：" prop="price">
          <span>{{price_origin}}</span>
        </el-form-item>
      </el-col>
    </el-row>
      <template v-if="isShow === 1">
        <el-row align="middle" :gutter="24" class="ivu-mt">
          <el-col :span="12">
            <el-form-item label="用工人数：" prop="population">
              <span>{{ruleForm.population}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单价：" prop="price">
              <span>{{ruleForm.price}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="是否公开：">
          <span>已公开</span>
        </el-form-item>
      </template>
      <template v-else>
        <el-row align="middle" :gutter="24" class="ivu-mt">
          <el-col :span="12">
            <el-form-item label="用工人数：" prop="population">
              <el-input v-model.number="ruleForm.population" type="number" class="selWidth" placeholder="与用工方沟通后的用工人数，单位：个"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单价：" prop="price">
              <el-input v-model.number="ruleForm.price" type="number" class="selWidth" placeholder="与用工方沟通后的单价，单位：元"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="是否公开：">
          <el-radio-group v-model="ruleForm.is_show">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" v-hasPermi="['admin:work:save']">提交</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </template>
    </el-form>
</template>

<script>
  import { workUpdateApi } from '@/api/workApi'
  import {Debounce} from '@/utils/validate'
  const defaultObj = {
    id : null,
    population: '',
    price: '',
    is_show: 2
  }
  export default {
    name: "WorkEdit",
    props:{
      id: {
        type: Number,
        default: null
      },
      editData:{
        type:Object,
        default: () => {
          return { rules: [] }
        }
      }
    },
    data() {
      const validatePrice = (rule, value, callback) => {
        let match = /(^[0-9]\d{0,3}$)|(^[0-9]\d{0,3}(\.\d{1,2}?)$)/
        if (!value) {
          return callback(new Error('请填写单价金额'));
        } else if (!match.test(value)) {
          ///^[1-0]\d{0,3}(\.\d{1,2}?)$/.test(str)||
          callback(new Error('单价金额最多不超过1万，小数点后面最多两位!'));
        } else {
          callback();
        }
      };
      const validatePopulation = (rule, value, callback) => {
        let match = /(^[1-9]\d*$)/
        if (!value) {
          return callback(new Error('请填写用工人数'));
        } else if (!match.test(value)) {
          callback(new Error('用工人数必须是正整数!'));
        } else {
          callback();
        }
      };

      return {
        ruleForm: Object.assign({}, defaultObj),
        rules: {
          population: [{ required: true, validator: validatePopulation, trigger: ['blur', 'change'] }],
          price: [{ required: true, validator: validatePrice, trigger: ['blur', 'change'] }],
        },
        isShow:2,//默认未公开
        population_origin:'',
        price_origin:'',
      }
    },
    mounted() {
      this.workInfo()
    },
    methods: {
      // 详情
      workInfo () {
        const { population, price, is_show, price_record, id } = this.editData //通过list中slot-scope=“scope“，scope.$index就是该行的下标，scope.row就是该行的数据所有消息对象，有了这两个参数就可以实现编辑、删除功能（this.editData就是scope.row传入的对象参数）
        this.ruleForm.population = population
        this.ruleForm.price = price
        this.ruleForm.is_show = is_show
        this.ruleForm.id = id

        this.isShow = is_show
        this.population_origin = price_record.population_origin
        this.price_origin = price_record.price_origin
      },
      submitForm:Debounce(function(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            workUpdateApi(this.ruleForm).then(async res => {
              this.$message.success('改价成功')
              this.$parent.$parent.visible = false
              this.$parent.$parent.getList()
            })
          } else {
            return false;
          }
        });
      }),
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$emit('resetForm');
      }
    }
  }
</script>

<style scoped>
 .selWidth{
   width: 90%;
 }
</style>
